<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<jsp:include page="menu.jsp" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/my.css" />
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // 初始化隐藏所有提示信息
        $('.note1, .note2, .note3').hide();
        

            $("#captcha").click(function() {
            	$("#captcha").attr("src", "captcha?timestamp=" + new Date().getTime());
			});
        
        
        // 1. 账号输入框onchange事件
        $('input[name="username"]').change(function() {
            var username = $(this).val().trim();
            var $note1 = $('.note1');
            
            if (username === '') {
                $note1.text('用户名不能为空！').show();
                return false;
            } else {
                $note1.hide();
                
                // 发起Ajax请求检查用户名
                $.ajax({
                    url: 'checkusername',
                    type: 'GET',
                    data: {
                        username: username,
                        timestamp: new Date().getTime()
                    },
                    success: function(response) {
                        // 直接将响应的文本数据显示在note1中
                        $note1.text(response).show();
                    },
                    error: function(xhr, status, error) {
                        $note1.text('检查用户名时发生错误').show();
                    }
                });
                
                return true;
            }
        });
        
        // 2. 密码输入框onchange事件
        $('input[name="password"]').change(function() {
            var password = $(this).val().trim();
            if (password === '') {
                $('.note2').show();
                return false;
            } else {
                $('.note2').hide();
                return true;
            }
        });
        
        // 3. 邮箱输入框onchange事件
        $('input[name="email"]').change(function() {
            var email = $(this).val().trim();
            var emailRegex = /^.+@.+\..+$/; // 简单的邮箱格式验证：X@XX.XX
            
            if (email === '' || !emailRegex.test(email)) {
                $('.note3').show();
                return false;
            } else {
                $('.note3').hide();
                return true;
            }
        });
        
        // 4. 表单onsubmit事件
        $('form').submit(function(event) {
            var isValid = true;
            var errorMessage = '';
            
            // 验证用户名
            var username = $('input[name="username"]').val().trim();
            if (username === '') {
                $('.note1').text('用户名不能为空！').show();
                isValid = false;
                errorMessage += '用户名不能为空！\n';
            }
            
            // 验证密码
            var password = $('input[name="password"]').val().trim();
            if (password === '') {
                $('.note2').show();
                isValid = false;
                errorMessage += '密码不能为空！\n';
            }
            
            // 验证邮箱
            var email = $('input[name="email"]').val().trim();
            var emailRegex = /^.+@.+\..+$/;
            if (email === '' || !emailRegex.test(email)) {
                $('.note3').show();
                isValid = false;
                errorMessage += '邮箱格式不正确！\n';
            }
            
            // 验证关注类型至少选择一个
            var typeChecked = $('input[name="type"]:checked').length;
            if (typeChecked === 0) {
                isValid = false;
                errorMessage += '请至少选择一个关注类型！\n';
            }
            
            // 如果验证不通过，阻止表单提交并显示提示
            if (!isValid) {
                event.preventDefault();
                alert('数据不完整\n\n' + errorMessage);
            }
            
            return isValid;
        });
    });
</script>
</head>
<body>
	<h1 class="title">用户注册</h1>
	<form action="regist" method="post">
		<table>
			<tr>
				<td>账号</td>
				<td><input type="text" name="username" /></td>
				<td><span class="note1" style="color: red; font-size: 12px;"></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password" /></td>
				<td><span class="note2" style="color: red; font-size: 12px;">密码不能为空！</span></td>
			</tr>
			<tr>
				<td>Email</td>
				<td><input type="text" name="email" /></td>
				<td><span class="note3" style="color: red; font-size: 12px;">邮箱格式不正确！</span></td>
			</tr>
			<tr>
				<td>性别</td>
				<td colspan="2" style="text-align: left;">
					<input type="radio" name="sex" value="1" checked="checked"/>男 
					<input type="radio" name="sex" value="0"/>女
				</td>
			</tr>
			<tr>
				<td>关注类型</td>
				<td colspan="2">
					<input type="checkbox" name="type" value="法律规定" checked="checked"/>法律规定
					<input type="checkbox" name="type" value="管理办法" />管理办法 
					<input type="checkbox" name="type" value="决定条例" />决定条例 
					<input type="checkbox" name="type" value="细则解释" />细则解释 
					<input type="checkbox" name="type" value="规范指南" />规范指南
				</td>
			</tr>
			<tr>
				<td>验证码</td>
				<td><input type="text" name="captcha" /></td>
				<td><img type="image" src="captcha" id="captcha"/></td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2"><input type="submit" value="注册" /></td>
			</tr>
		</table>
	</form>
</body>
</html>